<template> 
 
<div>
    <el-page-header @back="goBack">
    </el-page-header>
  <div v-show="active==1">
  <el-divider></el-divider>
  <el-form :inline="true" class="demo-form-inline" :model="getdir">
    <el-form-item label="项目名称:">
    <el-input v-model="getdir.projectName"   style="width: 200px;" size="small" ></el-input>
  </el-form-item>
  <el-form-item label="填报人:">
    <el-input v-model="getdir.name"   style="width: 200px;" size="small" ></el-input>
  </el-form-item>
  <el-form-item label="预算主题:">
    <el-input v-model="getdir.budgetName"   style="width: 200px;" size="small" ></el-input>
  </el-form-item>
  <el-form-item label="开始时间:">
    <el-input v-model="getdir.startcreateDate" type="date"  style="width: 200px;" size="small" ></el-input>
  </el-form-item>
  <el-form-item label="结束时间:">
    <el-input v-model="getdir.endcreateDate" type="date"  style="width: 200px;" size="small" ></el-input>
  </el-form-item>
   <el-form-item>
          <el-button @click="getDirectlyData" size="small" type="primary" icon="el-icon-search"
            >查询</el-button
          >
        </el-form-item>
  </el-form>
      <!-- 查询所有用户信息 -->
      <el-table :data="directlys.slice((currentPage-1)*pagesize,currentPage*pagesize)"
       border style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
       <el-divider></el-divider>
       <el-table-column label="序号" prop="i"></el-table-column>
            <el-table-column label="主题" prop="budgetName"></el-table-column>
                <el-table-column label="项目名称" prop="projectName"></el-table-column>
                <el-table-column label="日期" prop="createDate"></el-table-column>
                  <el-table-column label="填报人" prop="name"></el-table-column>
                  <el-table-column prop="status" label="流程状态">
          <template slot-scope="scope">
                    <span style="color: orange;font-weight: 700" v-if="scope.row.status=='1'">审批中</span>
                    <span style="color: red;font-weight: 700" v-if="scope.row.status=='2'">审批不通过</span>
                    <span style="color: green;font-weight: 700" v-if="scope.row.status=='3'">审批通过</span>
                </template>
          </el-table-column>
          <el-table-column label="操作">
          <template slot-scope="scope">
            <el-dropdown split-button type="primary" @command="handleCommand">
              操作
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="scope.row.i+ '-删除'"
                  >删除</el-dropdown-item
                >
                <el-dropdown-item :command="scope.row.i+ '-修改'"
                  >修改</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5, 10, 20, 40]" 
                            :page-size="pagesize"         
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="directlys.length">    
                    </el-pagination>
     </div>
     
    <update-indirect v-if="active==2" v-bind:aa="aa" v-bind:bb="bb" @updateSubcontractTo="updateSubcontract"></update-indirect>
     
      </div>
</template>

<script type="module">

import UpdateIndirect from '../cyy/UpdateIndirect.vue'
import BudgetModel from '../../model/cyy/BudgetModel.js'
const em=new  BudgetModel()
export default {
   components:{UpdateIndirect},
    data(){
        return{
           directlys:[],//直接成本预算数据
          active:1,
         getdir:{},
         currentPage:1, //初始页
      pagesize:5,    //每页的数据
      aa:{},
          bb:[],
           }
    },
    methods:{
    goBack(){
        this.active=1
      },
      getDirectlyData(){
          em.getDirectlyData1(this.getdir).then((Response)=>{
                this.directlys=Response.data.data
                
          })
      },
      // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
        },
        handleCommand(command) {//下拉框操作判断
      if (command.split("-")[1] == "删除") {//查看操作
        console.log(command.split("-")[0]);
        var i = command.split("-")[0];
        em.deleteByIdSubcontract1(i).then(() => {//删除
        this.getDirectlyData()
        });
      }
      if(command.split("-")[1] == "修改"){
        var id=command.split("-")[0];
        em.getByIdDirectly1(id).then((response)=>{
            this.aa=response.data.data.budget;
            this.bb=response.data.data.indirect;
            this.active++
        })
      }
    },
    updateSubcontract(a){
      em.updateSubcontract1(a).then(()=>{
          this.active=1
          this.getDirectlyData();
      })
    }
    },
    created(){
         this.getDirectlyData();
    }
}
</script>

<style>

</style>
